<template>
	<view class="team-wrapper">
		<top-nav>
			<view class="top-nav-content">
				<view class="left" @click="returnFun">
					<view class="icon"></view>
					<view>返回</view>
				</view>
				<view class="name">我的团队</view>
				<view class="right" @click="show=true"></view>
				<view class="fun-wrapper" v-show='show'>
					<view class="list" @click="handelFun('扫一扫')">
						<view class="icon"></view>
						扫一扫
					</view>
					<view class="list" @click="gotoPage('/pages/share/share')">
						<view class="icon"></view>
						邀请用户
					</view>
				</view>
			</view>
		</top-nav>
		<view class="statistics">
			<view class="item">
				<view class="name">直推人数</view>
				<view class="info">{{dataInfo.direct_push}}</view>
			</view>
			<view class="item">
				<view class="name">团队人数</view>
				<view class="info">{{dataInfo.team_sum}}</view>
			</view>
			<view class="item">
				<view class="name">激活设备数</view>
				<view class="info">{{dataInfo.device_sum}}</view>
			</view>
			<view class="item">
				<view class="name">有效团队数</view>
				<view class="info">{{dataInfo.active_sum}}</view>
			</view>
		</view>
		<view class="title">分享列表</view>
		<view class="team-list" v-for="item in team">
			<view class="avatar">
				<!-- <u-image width="100%" height="100%" :src="item.avatar"></u-image> -->
			</view>
			<view class="info">
				<view class="name">
					{{item.name}}
					<!-- <view class="label1" v-if='item.label==1'></view>
					<view class="label2" v-else-if='item.label==2'></view> -->
				</view>
				<!-- <view class="desc">{{item.desc}}</view> -->
			</view>
			<view class="icon"></view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import topNav from '../../components/top-nav/top-vue.vue';
	import bottomNav from '../../components/bottom-nav/bottom-nav.vue';
	export default{
		components:{
			topNav:topNav,
			bottomNav:bottomNav
		},
		data(){
			return {
				show:false,
				dataInfo:{},
				team:[]
			}
		},
		created(){
			this.$u.post('/api/myTeam', {account_id:uni.getStorageSync('account_id')}).then(res=>{
				if(res.code==200){
					this.dataInfo = {
						direct_push:res.data.direct_push,
						team_sum:res.data.team_sum,
						active_sum: res.data.active_sum,
						device_sum: res.data.device_sum,
					};
					this.team = res.data.list
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error',
					})
				}
			})
		},
		methods:{
			returnFun(){
				uni.navigateBack();
			},
			handelFun(name){
				this.show=false;
				this.$refs.uToast.show({
					title: name,
					type: 'success',
				})
			},
			gotoPage(path){
				this.show=false
				uni.navigateTo({
				    url: path
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.team-wrapper{
		padding:0 20*2rpx 130rpx;
		.statistics{
			margin: 40rpx auto 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item{
				width:160*2rpx;
				height:76*2rpx;
				background: #FFFFFF;
				border-radius: 8*2rpx;
				margin-bottom: 40rpx;
				color:#303133;
				padding:0  40rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size:14*2rpx;
				.name{
					margin-bottom:10rpx;
				}
			}
		}
		.title{
			font-size:24*2rpx;
			margin-bottom:20rpx;
		}
		.top-nav-content{
			width:200%;
			height:100%;
			padding:20*2rpx;
			position:relative;
			box-sizing: border-box;
			position:relative;
			.left{
				position: absolute;
				left: 0;
				display: flex;
				height: 100%;
				align-items: center;
				top:0;
				.icon{
					width: 0;
					height: 0;
					border-top: 10rpx solid transparent;
					border-right: 12rpx solid #FFFFFF;
					border-bottom:10rpx solid transparent;
					margin:0 20rpx;
				}
			}
			.name{
				font-size:24*2rpx;
				text-align: center;
			}
			.right{
				width:26*2rpx;
				height:26*2rpx;
				background-image: url('/static/team/icon2.png');
				position:absolute;
				right:40rpx;
				top:50%;
				margin-top:-26rpx;
				background-size: 100%;
			}
			.fun-wrapper{
				position:absolute;
				width:140*2rpx;
				right:40rpx;
				top:70*2rpx;
				background-color: #fff;
				border-radius: 8rpx;
				padding:0 20rpx;
				box-sizing: border-box;
				.list{
					display: flex;
					height:90rpx;
					align-items: center;
					color:#333;
					.icon{
						width:44rpx;
						height:44rpx;
						background: #999;
						margin-right:20rpx;
					}
					&:not(:last-child){
						border-bottom:1px solid #EEEEEE;
					}
				}
				&:after{
					content:'';
					display: block;
					position:absolute;
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-bottom: 12rpx solid #E5E5E5;
					right:20rpx;
					border-right:10rpx solid transparent;
					top:-12rpx;
				}
			}
		}
		.team-list{
			height:72*2rpx;
			display: flex;
			align-items: center;
			.avatar{
				width:40*2rpx;
				height:40*2rpx;
				border-radius: 50%;
				margin-right:16*2rpx;
				overflow: hidden;
			}
			.info{
				flex:1;
				.name{
					display: flex;
					align-items: center;
					font-size:18*2rpx;
					color:rgba(255,255,255,0.87)
					.label1{
						width:26*2rpx;
						height:16*2rpx;
						margin-left:20*2rpx;
						background-image: url('/static/team/label1.png');
						background-size: 100% 100%;
					}
					.label2{
						width:26*2rpx;
						height:16*2rpx;
						margin-left:20*2rpx;
						background-image: url('/static/team/label2.png');
						background-size: 100% 100%;
					}
				}
				.desc{
					font-size:13*2rpx;
					opacity: 0.6;
				}
			}
			.icon{
				width:32*2rpx;
				height:32*2rpx;
				background: url('/static/team/icon.png') no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>
